<template>
	<!-- 拨号动画bimg -->
	<view :class="{ 'bImg': item.id === '0', 'chatTelephone':true}">、


		<view class="head f24fff">
			Connect Al {{item.name}}
		</view>

		<view v-if=" item.id !== '0'" class="chat-tips">
			<view class="tips-txt">We sent a 6 digits verification code to:</view>
			<view class="f14fff">15278451245</view>
		</view>

		<!-- 拨号头像 -->
		<view v-if=" item.id === '0'" class="chat-image">
			<uv-image :src="item.aImg" width="80px" height="80px"></uv-image>
		</view>
		<!-- end -->

		<!-- 接通头像 -->
		<view v-else class="chat-image-hear">
			<uv-image :src="item.aImg" width="260px" height="260px"></uv-image>
		</view>
		<!-- end -->

		<!-- 拨号 -->
		<view v-if="item.id === '0'" class="chat-hangUp">
			<view class="f14fff mb-40">
				Discovering Product...
			</view>
			<view class="flex justify-center">
				<uv-image src="https://wechat-img-1311286543.cos.ap-guangzhou.myqcloud.com/es/phone-t.png" width="50px"
					height="50px"></uv-image>
			</view>
		</view>
		<!-- 我在听 -->
		<view v-if="item.id !== '0'" class="chat-hangUp hear">
			<view class="flex justify-center">
				<uv-image src="https://wechat-img-1311286543.cos.ap-guangzhou.myqcloud.com/es/speakerphone.png"
					width="36px" height="36px"></uv-image>
			</view>
			<view class="flex justify-center ">
				<uv-image v-if="item.id === '1'"
					src="https://wechat-img-1311286543.cos.ap-guangzhou.myqcloud.com/es/hear.gif" width="183px"
					height="50px"></uv-image>
				<uv-image v-if="item.id === '2'"
					src="https://wechat-img-1311286543.cos.ap-guangzhou.myqcloud.com/es/hear-3.gif" width="183px"
					height="50px"></uv-image>
				<uv-image v-if="item.id === '3'"
					src="https://wechat-img-1311286543.cos.ap-guangzhou.myqcloud.com/es/hear-4.gif" width="183px"
					height="50px"></uv-image>
			</view>
			<view class="flex justify-center">
				<uv-image src="https://wechat-img-1311286543.cos.ap-guangzhou.myqcloud.com/es/phone-t.png" width="36px"
					height="36px"></uv-image>
			</view>
		</view>
		<!-- 我在想 -->

		<!-- 我在说 -->
	</view>
</template>


<script>
	export default {
		data() {
			return {
				item: {}
			};
		},
		onLoad(e) {
			console.log(e);
			const item = JSON.parse(decodeURIComponent(e.item));
			this.item = item

		}
	}
</script>

<style lang="scss" scoped>
	.bImg {
		background-image: url('../../static/img/connecting.gif') !important;
		background-size: 100% 100% !important;
	}

	.chatTelephone {

		height: 100vh;
		width: 100%;
		text-align: center;
		position: relative;
		background: linear-gradient(180deg, #6928FF 0%, #411F8F 100%);


		.head {
			padding-top: 200rpx;
		}

		.chat-tips {
			font-size: 28rpx;
			font-weight: 400;
			color: #9D73FF;

			.tips-txt {
				margin: 60rpx 0 20rpx 0;
			}
		}

		.chat-image {
			// display: flex;
			// justify-content: center;
			position: absolute;
			left: 50%;
			top: 50%;
			margin-top: -20px;
			margin-left: -40px
		}

		.chat-image-hear {
			position: absolute;
			left: 50%;
			top: 50%;
			margin-top: -160px;
			margin-left: -130px
		}

		.chat-hangUp {
			margin-top: 95%;
		}

		.hear {
			display: flex;
			justify-content: center;
			align-items: center;
			.flex{
				margin:0 20rpx ;
			}
		}
	}
</style>